<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航栏</title>
  <link rel="stylesheet" href="../styles/navbar.css">
</head>
<body>
  <!-- 侧边导航栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="user-avatar">
        <img id="userAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
    </div>
    
    <div class="sidebar-nav">
      <div class="nav-item active" data-view="message">
        <div class="nav-icon">
          <img src="../assets/cd01.svg" alt="消息">
          <span class="notification-badge" id="notificationBadge" style="display: none;">0</span>
        </div>
        <div class="nav-text">消息</div>
      </div>
      <div class="nav-item" data-view="workbench">
        <div class="nav-icon">
          <img src="../assets/cd06.svg" alt="工作台">
        </div>
        <div class="nav-text">工作台</div>
      </div>
      <div class="nav-item" data-view="calendar">
        <div class="nav-icon">
          <img src="../assets/cd02.svg" alt="日历">
        </div>
        <div class="nav-text">日历</div>
      </div>
      <div class="nav-item" data-view="files">
        <div class="nav-icon">
          <img src="../assets/cd05.svg" alt="文件">
        </div>
        <div class="nav-text">文件</div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="nav-item" id="sidebarSettingsBtn">
        <div class="nav-icon">
          <img src="../assets/442P.png" alt="设置">
          <div class="server-status-indicator connecting" id="serverStatusIndicator"></div>
        </div>
        <div class="nav-text">设置</div>
      </div>
    </div>
  </div>

  <script src="../scripts/navbar.js"></script>
</body>
</html>
